本地项目暴露端口

本地后端Java项目 + 本地前端Vue项目

java后端通过mvn进行clean + install + package 然后去项目下的target找到heima-ai-0.0.1-SNAPSHOT.jar

Vue用vscode进行npm run build进行前端打包 然后去本前端项目的disk里面 把这里面的所有资源copy到
后端的static目录里：C:\Users\Pluminary\Desktop\HouDuan\heima-ai\src\main\resources\static

下载Ngrok 放在文件夹里 这样D:\ngrok\ngrok.exe 然后去系统环境变量的path添加D:\ngrok
随后通过cmd打开C:\Users\Pluminary\Desktop\HouDuan\heima-ai\target目录 然后运行命令java -jar heima-ai-0.0.1-SNAPSHOT.jar 这样就能带着前后端一起启动了

然后再打开一个cmd运行 ngrok http 8080即可

如果是第一次用需要把token配置到ngrok里面🧩 第 1 步：注册 Ngrok 免费账户

1. 打开官网注册（完全免费）：
   👉 https://dashboard.ngrok.com/signup
2. 注册后进入控制台首页：
   👉 https://dashboard.ngrok.com/get-started/your-authtoken
3. 复制你看到的 authtoken，比如：

1sdf_abc123XYZ456789_xxxxxxxxxxxxxxxx

---

🧩 第 2 步：配置 authtoken 到本地 Ngrok 客户端

打开终端，运行以下命令：

ngrok config add-authtoken 你的authtoken

示例：

ngrok config add-authtoken 1sdf_abc123XYZ456789_xxxxxxxxxxxxxxxx

成功后会提示：

Authtoken saved to configuration file: C:\Users\<你的用户名>\.ngrok\ngrok.yml

记得 如果想要手机也可以访问一定要写跨域

package com.itheima.ai.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("Content-Disposition");
    }
}

然后在前端代码里的api.ts里面不要写死localhost
比如const BASE_URL = 'http://localhost:8080' 要改成const BASE_URL = ''